﻿<template>
  <!-- ws的底层弹窗弹窗，用于展示ws的Consoled的消息 -->
  <el-dialog v-drag :title = 'wsConsoleInfo.dialogTitle' :visible.sync = 'wsConsoleInfo.visibleDialog' width = '50%' :before-close = 'closeWsConsoleDialog'
  :close-on-press-escape = 'false' :close-on-click-modal = 'false' append-to-body>
    <!-- log信息展示列表 -->
    <ul class = 'wsConsoleInfo_list'>
      <li v-for = '(item, index) in wsConsoleInfo.infoArray' :key = 'index'>{{index + 1}}、{{item}}</li>
    </ul>
    <!-- 需要执行ws的相关操作 -->
    <WebSocket-Main-Dialog :wsDialog = 'wsDialog' :wsTitle = 'wsTitle' :wsApiRouter = 'wsApiRouter'
    @webSocketDialogClosed = 'webSocketDialogClosed' @getConsoleInfoSuccess = 'getConsoleInfoSuccess'></WebSocket-Main-Dialog >
  </el-dialog>
</template>

<script>
// 获取webSocket交互的相关操作
import WebSocketMainDialog from '@/components/WebSocketComponents/WebSocketDialog.vue'
export default {
  // 需要三个参数(第一个参数表示打开当前弹窗，后两个表示ws操作相关的配置)
  // wsConsoleDialog-弹窗打开或关闭的变量
  // 2、wsTitle-本次ws连接的主题
  // 3、wsApiRouter-本次ws连接的地址
  props: ['wsConsoleDialog', 'wsTitle', 'wsApiRouter'],
  components: { WebSocketMainDialog },
  data () {
    return {
      // wsConsole弹窗相关
      wsConsoleInfo: {
        visibleDialog: false,
        dialogTitle: '',
        infoArray: []
      },
      // 打开ws配置相关的弹窗
      wsDialog: false
    }
  },
  methods: {
    // 初始化页面信息
    initComponent () {
      this.wsConsoleInfo.dialogTitle = 'log信息展示'
      this.wsConsoleInfo.infoArray = []
      this.wsDialog = true
    },
    // 从webSocket获取到console的信息
    getConsoleInfoSuccess (fromWs) {
      this.$set(this.wsConsoleInfo.infoArray, this.wsConsoleInfo.infoArray.length, fromWs)
    },
    // 关闭webSocket的弹窗
    webSocketDialogClosed () {
      this.wsDialog = false
      // 当没有wsConsole的信息时,关闭wsConsole的弹窗
      if (!this.wsConsoleInfo.infoArray.length) {
        this.$emit('wsConsoleDialogClosed')
      }
    },
    // 主动关闭wsConsole的弹窗
    closeWsConsoleDialog () {
      this.$emit('wsConsoleDialogClosed')
    }
  },
  watch: {
    wsConsoleDialog: {
      handler: function (val, oldVla) {
        this.wsConsoleInfo.visibleDialog = val
        if (val) {
          this.initComponent()
        }
      }
    }
  }
}
</script>

<style lang = 'scss' scoped>
.wsConsoleInfo_list {
  width: 100%;
  min-height: 100px;
  max-height: 400px;
  overflow-y: auto;
  li {
    width: 100%;
    line-height: 28px;
  }
}
</style>
